/**
 * girdPanel 
 * Store :数据记录的模型(行为单位) 
 * Column model : 列怎么显示 
 * Column makeup View : 封装了用户界面
 * interface selection model : 选择行为的模型
 */
// 普通表格
function createGrid(){
	var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ],
	 			[ 2, 'jfox', 'huihoo', 'www.huihoo.com' ],
	 			[ 3, 'jdon', 'jdon', 'www.jdon.com' ],
	 			[ 4, 'springside', 'springside', 'www.springside.com' ], ];
	 	var gird = new Ext.grid.GridPanel({
	 		title : "中国Java开源产品及团队",
	 		store : new Ext.data.ArrayStore({
	 			fields : [ "id", "name", "name2", "url" ],
	 			data : data
	 		}),
	 		columns : [ {
	 			header : "Id",
	 			width : 60,
	 			// 点击排序
	 			sortable : true,
	 			dataIndex : 'id'
	 		}, {
	 			header : "名称",
	 			width : 100,
	 			sortable : true,
	 			dataIndex : 'name'
	 		}, {
	 			header : "名称2",
	 			width : 100,
	 			sortable : true,
	 			dataIndex : 'name2'
	 		}, {
	 			header : "网址",
	 			width : 300,
	 			sortable : true,
	 			dataIndex : 'url',
	 			// 渲染为可点击的url
	 			renderer:function(v){
	 				return v.link(v);
	 			}
	 		} ]
	 	});
	 	new Ext.Viewport({
	 		layout : "fit",
	 		items : gird
	 	});
}

// 可编辑表格
function createEditorGrid(){
	var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com',new Date() ],
	 			[ 2, 'jfox', 'huihoo', 'www.huihoo.com',new Date() ],
	 			[ 3, 'jdon', 'jdon', 'www.jdon.com',new Date() ],
	 			[ 4, 'springside', 'springside', 'www.springside.com',new Date() ], ];
	 	var gird = new Ext.grid.EditorGridPanel({
	 		title : "中国Java开源产品及团队",
	 		store : new Ext.data.ArrayStore({
	 			fields : [ "id", "name","name2", "url","vDate" ],
	 			data : data
	 		}),
	 		columns : [ {
	 			header : "Id",
	 			width : 60,
	 			// 点击排序
	 			sortable : true,
	 			dataIndex : 'id'
	 		}, {
	 			header : "名称",
	 			width : 100,
	 			sortable : true,
	 			dataIndex : 'name'
	 		}, {
	 			header : "名称2",
	 			width : 100,
	 			sortable : true,
	 			editor : new Ext.form.TextField(),
	 			dataIndex : 'name2'
	 		}, {
	 			header : "网址",
	 			width : 300,
	 			sortable : true,
	 			dataIndex : 'url',
	 			// 渲染为可点击的url
	 			renderer:function(v){
	 				return "<a target='_blank' href='http://"+v+"'>"+v+"</a>";
	 			}
	 		}, {
	 			header : "日期",
	 			width : 100,
	 			// 写法1
	 			//xtype:"datecolumn",
	 			sortable : true,
	 			editor : new Ext.form.DateField(),
	 			dataIndex : 'vDate',
	 			// 写法2
	 			renderer:function(v){
	 				// 精确到s
	 				return v.format("Y-m-d:h:i:s");
	 			}
	 			// 写法3
	 			//renderer : Ext.util.Format.dateRenderer("Y-m-d")
	 		} ]
	 	});
	 	new Ext.Viewport({
	 		layout : "fit",
	 		items : gird
	 	});
}

//固定数据表格
function createPropertyGrid(){
	 	var gird = new Ext.grid.PropertyGrid({
	 		title : "中国Java开源产品及团队",
	 		source:{
	 			name:"abc",
	 			sex:"男",
	 			age:40,
	 			bornDate:new Date()
	 		}
	 	});
	 	new Ext.Viewport({
	 		layout : "fit",
	 		items : gird
	 	});
}
Ext.onReady(function() {
	createEditorGrid();
});
